<script setup lang="ts">
import BGpage from './component/BGpage.vue';
import Pane from './component/pane.vue';
import Tables from './component/Tables.vue';
import ClassRoomOnline from './component/ClassRoomOnline.vue';
import Echarts from './component/Echarts.vue';
import EchartsDemo from './component/EchartsDemo.vue';
import EchartFive from './component/EchartFive.vue';
</script>

<template>
  <div class="main">
     <BGpage>
      <div class="title"><span>大屏显示</span></div>
       <div class="context">
        <div class="row1">
<Echarts style="width: 100%; height: 40vh;"></Echarts>
<EchartsDemo style="width: 100%; height: 40vh;"></EchartsDemo>
<EchartFive style="width: 100%; height: 40vh;"></EchartFive>
        </div>
<div class="row2">
<ClassRoomOnline style="width: 60vw; height: 50vh;"></ClassRoomOnline>
<Tables style="width: 33vw; height: 50vh;"></Tables>
</div>


 </div>
     </BGpage>

    </div>

</template>

<style scoped>
.row1{
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
.row2{
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
.main{
  width: 100vw;
  height: 100vh;
}
.title{
 background-image: url(../images/titlebg.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 10%;
  text-align: center;
  color: white;

  display: flex;
  justify-content: center;
  align-items: center;

}
.title>span{
font-size: 3.5vh;
  
}
.context{
  overflow: hidden;
  overflow-y: hidden;
}
</style>
